<template>
  <div id="vModelSettingList">
    <el-checkbox-group v-model="modelCheckList" @change="modelCheckListChange">
      <el-checkbox v-for="modelName in supportedModelList" v-bind:key="modelName" :label="modelName">{{ modelName }}
      </el-checkbox>
    </el-checkbox-group>
    <div style="margin: 20px 0;"></div>
    <ModelSetting :model="vModel.name"/>
  </div>
</template>

<script>

import ModelSetting from '@/components/modelSetting'

export default {
  name: "VModelSettingList",
  components: {
    ModelSetting
  },
  props: ['vModel'],
  mounted() {
    for (let vm of this.vModel.model_list) {
      this.modelCheckList.push(vm)
      this.supportedModelList.push(vm)
    }
  },
  data() {
    return {
      modelCheckList: [],
      supportedModelList: [],
    }
  },
  methods: {
    modelCheckListChange: function (newList) {
      this.$store.dispatch(
          'updateVirtualModelMember',
          {
            'vModelName': this.vModel.name,
            'modelList': newList
          }
      )
    },
  },
}
</script>

<style scoped>
.el-checkbox-group {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-checkbox {
  width: 120px;
}
</style>